@import '../../css/base.scss';
body {
    background: #f9f9f9;
}
.mo-filter {
    border-bottom: solid 1px #e5e5e5;
}
.mo-box {
    margin-bottom: p2rm(20);
    background: #fff;
}
.mo-tab {
    display: flex;
    justify-content: space-around;
    $height: p2rm(90);
    width: 100%;
    height: $height;
    font-size: p2rm(28);
    text-align: center;
    background: #fff;
    .mo-tab-item {
        display: inline-block;
        height: $height;
        line-height: $height;
        padding: 0 p2rm(10);
        &.active {
            $active: #f15a24;
            color: $active;
            border-bottom: solid p2rm(4) $active;
        }
    }
}
.mo-status {
    display: flex;
    justify-content: flex-end;
    padding: 0 p2rm(30);
    height: p2rm(75);
    font-size: p2rm(24);
    border-bottom: solid 1px #e5e5e5;
    .mo-status-text {
        display: flex;
        align-items: center;
    }
}

.mo-item {
    padding: p2rm(30);
    border-bottom: solid 1px #e5e5e5;
    .mo-item-img {
        display: block;
        float: left;
        width: p2rm(120);
        height: p2rm(120);
        background: #aaa;
    }
    .mo-item-exp {
        float: left;
        max-width: p2rm(700 - 180);
    }
    .mo-item-name {
        display: inline-block;
        padding-left: p2rm(30);
        height: p2rm(64);
        line-height: p2rm(30);
        font-size: p2rm(24);
    }
    .mo-icon-item {
        display: inline-block;
        margin-left: p2rm(30);
        line-height: p2rm(50);
        font-size: p2rm(24);
        color: #666;
    }
    .mo-icon {
        position: relative;
        top: p2rm(4);
        display: inline-block;
        margin-right: p2rm(10);
        width: p2rm(25);
        height: p2rm(25);
        background-color: #eee;
    }
    .mo-icon-protect {
        background: url(/css/i/icon-protect.png) no-repeat;
        background-size: 100%; 
    }
}
.mo-item-total {
    display: flex;
    justify-content: flex-end;
    padding: 0 p2rm(30);
    height: p2rm(80);
    line-height: p2rm(80);
    font-size: p2rm(24);
    .mo-total-price {
        font-size: p2rm(32);
    }
}
.mo-item-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: p2rm(80);
    line-height: p2rm(80);
    border-top: solid 1px #e5e5e5;
    background-color: #fff;
    .btn-ord {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: p2rm(30);
        height: p2rm(56);
        width: p2rm(150);
        font-size: p2rm(24);
        border: solid 1px #333;
        border-radius: p2rm(4);
    }
    .btn-ord-em {
        color: #f15a24;
        border: solid 1px #f15a24;
    }
}